// 查询雇员姓名，身份证，客户名称等
// 注意： 请求地址：searchUrl，form验证：form传入，需要的数据：getEmpInfo，是否清除数据：isClear=true默认清除
import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Select, Spin, AutoComplete } from 'antd';
import { connect } from 'dva';

import Search from '@/components/AntDesign/Search';

// const { Search } = Input;
const { Option } = Select;
const FormItem = Form.Item;
@connect(({ publicdata: { idCodeEmpList, empInfo }, loading }) => ({
  idCodeEmpList,
  empInfo,
  loading: loading.effects['publicdata/searchIdCodeEmpList'] || false,
}))
class SearchEmp extends React.Component {
  componentDidMount() {
    const { dispatch, form, optionKey, isClear = true } = this.props;
    if (isClear) {
      form.resetFields([optionKey]);
      dispatch({
        type: 'publicdata/updateModelData',
        payload: {
          empInfo: {},
          idCodeEmpList: [],
        },
      });
    }
  }

  // 输入证件号清空选择
  changeIdcode = value => {
    const { dispatch } = this.props;
    if (value.trim()) {
      dispatch({
        type: 'publicdata/updateModelData',
        payload: {
          empInfo: {},
        },
      });
    }
  };

  // 输入证件号查询员工
  searchEmpIdcode = value => {
    const {
      form,
      dispatch,
      searchUrl = '/csApi/empSendQueryService/getEmpToIdCode',
      params = {},
      optionKey,
    } = this.props;
    if (value.trim()) {
      const searchValue = value
        .trim()
        .split('(')[0]
        .trim();
      form.setFieldsValue({ [optionKey]: searchValue });
      dispatch({
        type: 'publicdata/searchIdCodeEmpList',
        payload: {
          searchUrl,
          params: { idCode: searchValue, ...params },
        },
      });
    }
  };

  // 选择某一雇员
  selectEmpIdCode = (value, options) => {
    const { dispatch, getEmpInfo, form, optionKey } = this.props;
    const empInfo = options.props && options.props.fsOptions;
    dispatch({
      type: 'publicdata/updateModelData',
      payload: {
        empInfo: { ...empInfo, showIdCodeText: `${empInfo.idCode} (${empInfo.custName})` },
      },
    });
    form.setFieldsValue({ [optionKey]: `${empInfo.idCode} (${empInfo.custName})` });
    if (getEmpInfo) {
      getEmpInfo(empInfo);
    }
  };

  render() {
    const {
      loading,
      form,
      formItemLayout = {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 },
          md: { span: 10 },
        },
      },
      idCodeEmpList,
      empInfo = {},
      optionKey = 'idCode',
    } = this.props;
    const { getFieldDecorator } = form;
    // 雇员列表查询
    let options = null;
    if (idCodeEmpList && idCodeEmpList.length) {
      options = idCodeEmpList.map(item => (
        <Option key={item.idCode} value={item[optionKey]} fsOptions={item}>
          {`${item.idCode} (${item.custName})`}
        </Option>
      ));
    }
    return (
      <Form>
        <FormItem {...formItemLayout} label="证件号">
          {getFieldDecorator(optionKey, {
            rules: [
              {
                required: true,
                message: '请正确输入证件号码',
              },
            ],
            initialValue: empInfo.showIdCodeText,
          })(
            <AutoComplete
              style={{ width: '100%' }}
              dataSource={options}
              onChange={value => this.changeIdcode(value)}
              onSelect={this.selectEmpIdCode}
              notFoundContent={loading ? <Spin size="small" /> : null}
            >
              <Search
                placeholder="请正确输入证件号码"
                style={{ width: '100%' }}
                filterOption={(inputValue, option) =>
                  option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
                }
                onSearch={value => this.searchEmpIdcode(value)}
              />
            </AutoComplete>
          )}
        </FormItem>
        <FormItem {...formItemLayout} label="姓名">
          {empInfo.empName || '--'}
        </FormItem>
        <FormItem {...formItemLayout} label="客户">
          {empInfo.custName || '--'}
        </FormItem>
      </Form>
    );
  }
}
export default SearchEmp;
